<template>
  <div>
    <el-card
      shadow="hover"
      style="border: 0px; margin-top: 20px"
      v-bind:key="blog.id"
      v-for="blog in blogs"
    >
      <el-row>
        <el-col :span="12">
          <el-image
            :src="blog.image"
            class="image"
            style="width: 80%; height: 250px; border-radius: 10px; cursor: pointer"
            fit="cover"
            @click="pushDetail(blog.id)"
          ></el-image>
        </el-col>
        <el-col :span="12">
          <el-link
            :href="'/blog/' + blog.id"
            style="font-size: 1.375rem; color: #11181f; text-decoration: none"
          >
            {{ blog.title }}</el-link
          >
          <div class="bottom clearfix" style="margin-top: 20px">
            <p style="font-size: 1.125rem; color: #515c67">{{ blog.description }}</p>
          </div>
          <div class="bottom clearfix" style="position: absolute; bottom: 0px">
            <p style="font-size: 1.125rem; color: #515c67">{{ blog.created }}</p>
          </div>
          <el-popconfirm
            title="确定要删除这篇博客吗？"
            icon="el-icon-info"
            icon-color="red"
            @confirm="deleteBlog(blog.id)"
            :data-id="blog.id"
          >
            <el-button
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              size="mini"
              style="float: right; position: absolute; bottom: 10px; right: 10px"
              circle
              v-if="isOwn"
            >
            </el-button>
          </el-popconfirm>
        </el-col>
      </el-row>
    </el-card>
    <el-pagination
      v-if="total != 0"
      style="margin-top: 20px"
      class="mpage"
      background
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="page"
    />
    <el-card v-if="total == 0" shadow="never" style="text-align: center; border: 0px">
      <p style="font-size: 1.575rem; color: #cbcdda; user-select: none">{{ msg }}</p>
      <el-image
        style="user-select: none"
        src="https://gitee.com/caohonghai8/Images/raw/master/blog/20201204174023.png"
      ></el-image>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blogs: {},
      currentPage: 1,
      total: 0,
      pageSize: 5,
      userId: "",
      uid: "", // 访客ID
      msg: "您当前还没有发表文章哦，赶紧去发表一篇吧~",
      viewsId: 0,
      viewName: "",
      isOwn: false,
    };
  },
  methods: {
    page(currentPage) {
      const _this = this;
      _this.$axios
        .get("/getBlog/" + _this.userId + "?currentPage=" + currentPage)
        .then((res) => {
          console.log(res);
          if (res.data.data.records != null) _this.blogs = res.data.data.records;
          _this.currentPage = res.data.data.current;
          _this.total = res.data.data.total;
          _this.pageSize = res.data.data.size;
        });
    },
    pushDetail(blogId) {
      this.$router.push("/blog/" + blogId);
    },
    deleteBlog(blogId) {
      const _this = this;
      _this.$axios
        .delete("/blog/delete/" + blogId, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            _this.page(1);
            _this.$message.success("删除成功");
          }
        });
    },
  },
  created() {
    const _this = this;
    _this.viewsId = this.$route.params.id;
    if (sessionStorage.getItem("userInfo") == "{}") console.log("Logs Not Login");
    else {
      _this.isOwn = _this.viewsId == _this.$store.getters.getUser.id;
    }
    this.userId = this.$route.params.id;
    this.uid = this.$store.getters.getUser.id; // 登入的id
    if (this.uid != this.userId) this.msg = "他还没有发表过文章哦~";
    this.page(1);
  },
};
</script>

<style scoped>
.mpage {
  margin: 0 auto;
  text-align: center;
}
a:hover {
  text-decoration: none;
}
.el-link.is-underline:hover::after {
  text-decoration: none;
  border-bottom: 0px;
}
</style>
